<template>
  <!-- 预览 -->
  <el-button @click="showPreview = true">预览</el-button>
  <el-dialog v-model="showPreview" title="预览" width="400px">
    <test3Preview :modeForm="testModeForm"></test3Preview>
  </el-dialog>
  <div class="model">
    <el-form
      ref="modeFormRef"
      :rules="modeFormRules"
      :model="modeForm"
      style="text-align: center"
      label-width="100px"
      label-position="top"
    >
      <el-form-item class="model-title" label="模板名称" prop="value1">
        <el-input v-model="modeForm.value1" clearable maxlength="30"></el-input>
      </el-form-item>
      <div class="model-detail">
        <!-- 名称 -->
        <el-form-item style="text-align: center" label="" prop="value2">
          <model-title v-model:value2="modeForm.value2"></model-title>
        </el-form-item>

        <!-- 图片视频上传 -->
        <el-form-item style="text-align: center" label="" prop="value3">
          <model-swiper v-model:value3="modeForm.value3"></model-swiper>
        </el-form-item>

        <!-- table -->
        <el-form-item style="text-align: center" label="" prop="value4">
          <model-table v-model:value4="modeForm.value4"></model-table>
        </el-form-item>

        <!-- opetate -->
        <el-form-item style="text-align: center" label="" prop="value5">
          <model-operate v-model:value5="modeForm.value5"></model-operate>
        </el-form-item>

        <!-- content -->
        <el-form-item style="text-align: center" label="" prop="value6">
          <model-content v-model:value6="modeForm.value6"></model-content>
        </el-form-item>

        <!-- map -->
        <el-form-item style="text-align: center" label="" prop="value7">
          <model-map v-model:value7="modeForm.value7"></model-map>
        </el-form-item>

        <!-- file -->
        <el-form-item style="text-align: center" label="" prop="value8">
          <model-file v-model:value8="modeForm.value8"></model-file>
        </el-form-item>

        <!-- icon bottom -->
        <div class="model-detail-bottom">
          <div class="model-detail-bottom-item">
            <Share class="model-detail-bottom-item-icon"></Share>
            分享
          </div>
          <div class="model-detail-bottom-item">
            <Star class="model-detail-bottom-item-icon"></Star>
            收藏
          </div>
        </div>
      </div>
      <el-button type="primary" style="margin-top: 2rem" @click="saveTemplate"
        >保存模板</el-button
      >
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from "vue";
import "@/utils/style/modelStyle.scss";
import modelTitle from "./template/model-title.vue";
import modelSwiper from "./template/model-swiper.vue";
import modelTable from "./template/model-table.vue";
import modelOperate from "./template/model-operate.vue";
import modelContent from "./template/model-content.vue";
import modelMap from "./template/model-map.vue";
import modelFile from "./template/model-file.vue";
import test3Preview from "./component/test3Preview.vue";
defineOptions({ name: "modelView" });
const modeFormRef = ref(null);
const value4Validater = (rule, value, callback) => {
  for (let i = 0; i < value.length; i++) {
    if (value[i].name) {
      callback();
      return;
    }
  }
  callback(new Error("请输入"));
};
const modeFormRules = reactive({
  value1: [{ required: true, message: "请输入", trigger: "blur" }],
  value2: [{ required: true, message: "请输入", trigger: "blur" }],
  value4: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: value4Validater,
    },
  ],
});

//预览测试数据
const testModeForm = ref({
  value1: "name",
  value2: "buildname",
  value3: [
    {
      name: "123456.png",
      percentage: 0,
      status: "ready",
      size: 1774,
      raw: { uid: 1724313397972 },
      uid: 1724313397972,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    },
  ],
  value4: [{ name: "product", value: "provalue", isUpload: true }],
  value5: {
    type: "flow",
    value: [
      {
        auth: "1",
        name: "添加",
        nameDetail: "",
        btnName: "add",
        btnColor: "#C74C49",
        icon: "",
        operateWay: "跳转链接",
      },
    ],
  },
  value6: "<p>配置aaaaaaaa</p>",
  value7: { value: [104.044797, 30.703036], label: "小红花", type: "map" },
  value8: [],
});
const showPreview = ref(false);


const modeForm = ref({
  value1: "",
  value2: "",
  value3: [],
  value4: [
    {
      name: "",
      value: "",
      isUpload: false,
    },
  ],
  value5: {},
  value6: "",
  value7: {},
  value8: [],
});

const title = ref(null);
const saveTemplate = () => {
  // console.log(777,modeForm.value);

  if (!modeForm.value) return;
  modeFormRef.value.validate((valid) => {
    if (valid) {
      console.log("提交：", JSON.stringify(modeForm.value));
    } else {
      // console.log("error submit!!");
      return false;
    }
  });
};

onUnmounted(() => {
  console.log("unmounted");
});

onMounted(() => {
  console.log("mounted");
  // 移动到template model-title
  //title添加鼠标hover事件监听
  if (title.value) {
    // mouseHover不生效
    // title.value.addEventListener("mouseover", () => {
    //   modeForm.value.value2 = "请输入名称";
    // });
  }
});
</script>

<style lang="scss"></style>
